<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #handle-area>
        <el-button type="primary" @click="addHandle">新增</el-button>
      </template>
      <template #handle="{row}">
        <el-button type="text" size="small" @click="editHandle(row)">编辑</el-button>
        <el-button type="text" size="small" class="danger-text-button" @click="deleteHandle(row)">删除</el-button>
        <el-button type="text" size="small" :class="row.status === 0 ? 'danger-text-button':''" @click="editStatus(row)">{{ row.status === 0 ? '停用':'启用' }}</el-button>
      </template>
    </pf-table>
    <AddLabel
      v-if="showLabel"
      :type="type"
      :form-detail="detail"
      @close="closeHandle"
      @confirm="confirmHandle"
    />
  </div>
</template>

<script>
import { ACCOUNT_STATUS } from '@/utils/enum'
import AddLabel from './AddLabel.vue'

export default {
  name: 'LabelList',
  components: {
    AddLabel
  },
  data() {
    return {
      form: {},
      type: 'add',
      detail: {},
      statusOptions: ACCOUNT_STATUS,
      showLabel: false,
      loading: false
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '150px' }
      return [
        { label: '字典标签', prop: 'label', attrs },
        { label: '字典排序', prop: 'sort', attrs },
        { label: '状态', prop: 'status', attrs },
        { label: '备注', slot: 'remark', attrs },
        { label: '创建时间', slot: 'createTime', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '240px' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'input',
          label: '字典标签',
          prop: 'label'
        }, {
          type: 'select',
          label: '状态',
          prop: 'status',
          options: this.statusOptions
        }
      ]
    }
  },

  methods: {
    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      // const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      // const data = {
      //   pageNo,
      //   pageSize,
      //   createStartTime,
      //   createEndTime,
      //   ...formQuery
      // }
      // getIndustryList(data).then(res => {
      //   this.loading = false
      //   done({ data: res || [] })
      // }).catch(() => {
      //   done({ data: [] })
      //   this.loading = false
      // })
      done({ data: [{ status: 1 }, { status: 0 }] })
    },

    // 新增
    addHandle() {
      this.type = 'add'
      this.detail = {}
      this.showLabel = true
    },

    // 编辑
    editHandle(row) {
      this.type = 'edit'
      this.detail = row
      this.showLabel = true
    },

    // 删除
    deleteHandle(row) {
      this.$confirm('确定删除该标签吗?', '提示', {
        type: 'warning'
      }).then(() => {
      }).catch(() => {})
    },

    // 修改状态
    editStatus(row) {
      let status = ''
      let message = ''
      if (row.status === 0) {
        message = '确定禁用该标签吗'
        status = 1
      } else {
        message = '确定启用该标签吗'
        status = 0
      }
      // const data = {
      //   id: row.id,
      //   status
      // }
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(() => {
        // editAgreementStatus(data).then(() => {
        //   this.$message.success('修改成功')
        //   this.$refs.pfTable.getTableData()
        // }).catch(() => {})
      }).catch(() => {})
    },

    // 关闭弹窗
    closeHandle() {
      this.showLabel = false
    },

    // 确定
    confirmHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped></style>
